import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js'; //引入jquery类库
import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js'; //引入懒加载插件
import {} from './jquery.pagination.js'; //引入分页插件


// 一.图片懒加载的使用。
// 1.给图片对象设置宽高。
// 2.给图片对象添加一个类 -> class='lazy';
// 3.将图片对象src属性 -> data-original
// 4.添加js代码执行懒加载动作。


// 二.分页插件的使用
// 1.引入css和js文件，分页插件非常多，选择的是pagination插件。
// 2.分页思路
// 前端引入对应的css和js
// 前端需要将对应的页面传递给后端。
//  $('.page').pagination({
//     pageCount: 3, //总的页数
//     jump: true, //是否开启跳转到指定的页数，布尔值。
//     prevContent: '上一页', //将图标改成上一页下一页。
//     nextContent: '下一页',
//     callback: function(api) {
//         console.log(api.getCurrent()); //获取当前的点击的页码。
//     }
// });


function list() {

    //定义排序的初始值
    let array_list = []; //存放li的数组
    let array_list_default = []; //存放li的数组

    //获取接口数据
    $.ajax({
        url: 'http://10.31.157.31/JS2101/projectname/php/list.php',
        dataType: 'json'
    }).done(function(objData) {
        let arrData = objData.pagecontent; //渲染的结构
        //1.渲染列表结构
        let strHtml = '';
        $.each(arrData, function(index, value) {
            //每一个商品都有唯一的sid，通过链接将商品的sid传给详情页。
            strHtml += `
                <li>
                    <a href="detail.html?sid=${value.sid}">
                        <img data-original="${value.picurl}" class="lazy" />
                        <p>${value.title}</p>
                        <span>￥${value.price}</span>
                    </a>
                </li>
            `;
        });
        $('.list ul').html(strHtml);


        //2.排序变量赋值
        array_list = []; //存放li的数组
        array_list_default = []; //存放li的数组

        $('.list ul li').each(function(index, element) { //element是原生js的元素对象，不是jquery对象。
            array_list.push($(element));
            array_list_default.push($(element));
        });

        //3.添加懒加载效果
        $(function() {
            $("img.lazy").lazyload({ effect: "fadeIn" });
        });


        //4.分页插件的引用
        $('.page').pagination({
            pageCount: objData.pagesize, //总的页数
            jump: true, //是否开启跳转到指定的页数，布尔值。
            prevContent: '上一页', //将图标改成上一页下一页。
            nextContent: '下一页',
            callback: function(api) {
                console.log(api.getCurrent()); //获取当前的点击的页码。
                //将页面传给后端
                $.ajax({
                    url: 'http://10.31.157.31/JS2101/projectname/php/list.php',
                    data: {
                        page: api.getCurrent()
                    },
                    dataType: 'json'
                }).done(function(objData) {
                    //获取后端分页的接口数据，重新渲染
                    let arrData = objData.pagecontent; //渲染的结构
                    //1.渲染列表结构
                    let strHtml = '';
                    $.each(arrData, function(index, value) {
                        //每一个商品都有唯一的sid，通过链接将商品的sid传给详情页。
                        strHtml += `
                    <li>
                        <a href="detail.html?sid=${value.sid}">
                            <img data-original="${value.picurl}" class="lazy" />
                            <p>${value.title}</p>
                            <span>￥${value.price}</span>
                        </a>
                    </li>
            `;
                    });
                    $('.list ul').html(strHtml);

                    //2.排序变量赋值
                    array_list = []; //存放li的数组
                    array_list_default = []; //存放li的数组
                    $('.list ul li').each(function(index, element) { //element是原生js的元素对象，不是jquery对象。
                        array_list.push($(element));
                        array_list_default.push($(element));
                    });

                    //3.添加懒加载效果
                    $(function() {
                        $("img.lazy").lazyload({ effect: "fadeIn" });
                    });
                })
            }
        });


    });

    // 默认排序
    $('button').eq(0).on('click', function() {
        $.each(array_list_default, function(index, value) {
            $('.list ul').append(value); //append：追加元素。如果原数组中存在要追加的元素，直接利用原数组里面的进行操作。
        });
    });
    // 进行排序
    $('button').eq(1).on('click', function() {
        for (let i = 0; i < array_list.length - 1; i++) {
            for (let j = 0; j < array_list.length - i - 1; j++) {
                let prev = parseFloat(array_list[j].find('span').html().substring(1));
                let next = parseFloat(array_list[j + 1].find('span').html().substring(1));
                if (prev > next) {
                    let temp = array_list[j];
                    array_list[j] = array_list[j + 1];
                    array_list[j + 1] = temp;
                }
            }
        }
        $.each(array_list, function(index, value) {
            $('.list ul').append(value); //append：追加元素。如果原数组中存在要追加的元素，直接利用原数组里面的进行操作。
        });
    });
}

export {
    list
}